<template>
  <div>
    <h2>
      {{ msg }}
    </h2>
    <Home title="但大多数地方"></Home>
    <button @click="add">add</button>
    <SetupCom></SetupCom>
    <SetupCom2></SetupCom2>
    <SetupCom3></SetupCom3>
    <SetupCom4></SetupCom4>
  </div>
</template>

<script>
import { computed } from 'vue';
import Home from './components/home.vue';
import SetupCom from './components/setupCom.vue';
import SetupCom2 from './components/2_computed.vue';
import SetupCom3 from './components/3_watch.vue';
import SetupCom4 from './components/setupCom4.vue';

import { zqsort } from 'testzq';
import emmiter from './utils/bus.js';
export default {
  data() {
    return {
      msg: '顶顶顶顶',
      arr: [1, 2, 3],
    };
  },
  components: {
    Home,
    SetupCom,
    SetupCom2,
    SetupCom3,
    SetupCom4,
  },
  // provide () {
  //   return {
  //     name: '稀罕三',
  //     length: computed(() => this.arr.length)
  //   }
  // },
  methods: {
    add() {
      // this.arr.push('aa')
      // console.log(this.arr);
      emmiter.emit('changeval', 89);
    },
  },
  mounted() {
    // console.log(this);
    // console.log('zqsort', zqsort([4,3,6,1]));
    emmiter.on('changeval', (data) => {
      console.log(data);
    });
  },
};
</script>

<style scoped>
h2 {
  color: #ffffff;
}
</style>
